<template>
  <div id="active-managed-container">
    <div class="table-box">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="待审核" name="1"></el-tab-pane>
        <el-tab-pane label="报名中" name="2"></el-tab-pane>
        <el-tab-pane label="审核失败" name="3"></el-tab-pane>
        <el-tab-pane label="待举办" name="4"></el-tab-pane>
        <el-tab-pane label="进行中" name="5"></el-tab-pane>
        <el-tab-pane label="已结束" name="6"></el-tab-pane>
      </el-tabs>
      <p>共有数据: {{ totalInfo }} 条</p>
      <el-table
        :data="tableData"
        border
        style="width: 100%;color: #515a6e"
        class="el-table">
        <el-table-column prop="id" label="ID" width="100"> </el-table-column>
        <el-table-column prop="activityPosters" label="活动海报">
          <template slot-scope="scope">
            <img :src="tableData[0].activityPosters" />
          </template>
        </el-table-column>
        <el-table-column prop="activityTitle" label="活动标题">
        </el-table-column>
        <el-table-column prop="activityNumber" label="活动编号">
        </el-table-column>
        <el-table-column prop="activityTypeName" label="活动类型">
        </el-table-column>
        <el-table-column prop="activityDetail" label="详情">
          <template slot-scope="scope">
            <el-button size="mini" type="text">查看详情</el-button>
          </template>
        </el-table-column>
        <el-table-column prop="keywords" label="关键词"> </el-table-column>
        <el-table-column prop="roleRemark" label="发布人"> </el-table-column>
        <el-table-column prop="releaseTime" label="发布时间"> </el-table-column>
        <el-table-column prop="operation" label="操作" width="200" v-if="activeName==1?true:false">
          <template slot-scope="scope">
            <el-button @click="handlePass(scope.row)" size="mini"
              >通过</el-button
            >
            <el-button size="mini" @click="handleDel(scope.row)"
              >拒绝</el-button
            >
          </template>
        </el-table-column>
        <template v-else-if="activeName==3?true:false">
          <el-table-column prop="checkPersonContact" label="审核人联系方式"></el-table-column>
          <el-table-column prop="checkRemark" label="审核备注"></el-table-column>
        </template>
      </el-table>
    </div>
    <el-pagination
      layout="prev, pager, next, jumper"
      background
      class="pagination"
      :total="totalInfo"
      :page-size="pageMap.pageSize"
      :hide-on-single-page="true"
      :current-page="pageMap.pageNum"
      @current-change="handleCurrentChange"
      @next-click="handleNextClick"
      @prev-click="handlePrevClick"
    >
    </el-pagination>
    <role-form
      :row="row"
      v-show="formShow"
      v-on:formCancel="formCancel"
      v-on:reloadData="loadData"
    />
    <mask-layer v-show="maskShow" />
  </div>
</template>

<script>
import { addActivity, deleteRole, getActivityList } from "../api/index";
import roleForm from "../components/roleForm.vue";

export default {
  components: { roleForm },
  name: "activeManaged",
  data() {
    return {
      activeName: "1",
      totalInfo: 0,
      tableData: [],
      formShow: false,
      maskShow: false,
      pageCount: 0,
      row: {
        id: 0,
        name: "",
        roleRemark: ""
      },
      pageMap: {
        pageNum: 1,
        pageSize: 5
      }
    };
  },
  created() {
    this.loadData("1");
  },
  methods: {
    loadData(tabName) {
      getActivityList(this.pageMap).then(res => {
        if (res.data.code == 0) {
          this.tableData = res.data.rows.filter(r => r.checkStatus == tabName);
          // console.log(this.tableData);
          this.totalInfo = this.tableData.length;
        } else {
          this.$message.error("获取数据失败");
        }
      });
    },
    handleAddOrEdit(row) {
      // console.log(row);
      this.formShow = true;
      this.maskShow = true;
      this.row = row;
    },
    handlePass(row) {
      // console.log(row);
      this.$confirm("确认通过该活动审核", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          addActivity(row.id).then(res => {
            // console.log(res.data);
            if (res.data.code == 0) {
              this.$message({
                type: "success",
                message: "删除成功!",
                duration: 1500
              });
              this.loadData();
            } else {
              this.$message.error(res.data.msg);
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    formCancel() {
      this.formShow = false;
      this.maskShow = false;
    },
    handleNextClick() {
      this.pageMap.pageNum++;
      this.loadData();
    },
    handlePrevClick() {
      this.pageMap.pageNum--;
      this.loadData();
    },
    handleCurrentChange(val) {
      this.pageMap.pageNum = val;
      this.loadData();
    },
    handleClick(tab) {
      // console.log("tab", tab.name);
      this.loadData(tab.name);
      // console.log(document.querySelector(".el-table .has-gutter"));
      // document.querySelector(".el-table .has-gutter .el-table_2_column_20").
    }
  }
};
</script>

<style scoped>
#active-managed-container {
  position: relative;
  max-width: 100%;
  height: 100vh;
  background: #f9f9f9;
  color: #515a6e;
}

.table-box {
  width: 90%;
  height: auto;
  padding: 30px;
  position: relative;
  top: 5%;
  left: 50%;
  transform: translateX(-50%);
  background: #fff;
}

.table-box .add-btn {
  margin: 10px 0;
}

.table-box p {
  margin-bottom: 10px;
}

.el-table {
  width: 100%;
  height: auto;
}

.pagination {
  margin-top: 45px;
  text-align: center;
}
</style>
